<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        label-width="90px"
        label-position="right"
        readonly
      >
        <el-row>
          <el-col :span="12">配件信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="配件名称:">
              <div>{{ fromdata.partsName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属门店:">
              <div>{{ fromdata.storeName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属类别:">
              <div>{{ fromdata.partsType }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配件供应商:">
              <div>{{ fromdata.supplierName }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="配件编号:">
              <div>{{ fromdata.partsCode }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配件单位:">
              <div>{{ fromdata.partsUnit }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配件型号:" label-width="150">
              <div>{{ fromdata.partsModel }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="现存仓库:">
              <div>{{ fromdata.storageName }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="仓库编号:">
              <div>{{ fromdata.storageCode }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="配件备注:" prop="remark">
              <div>{{ fromdata.partsName }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-row>
        <el-col :span="22">配件存放仓位列表</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <data-table
          :value="tableData"
          :total-count="totalCount"
          :has-action="true"
          :table-column-attributes="tableColumnAttributes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :width="160"
        >
          <template #action="{ row }">
            <i
              class="el-icon-view"
              title="查看"
              style="cursor: pointer"

              @click="view(row)"
            ></i>
          </template>
        </data-table>
      </el-row>
    </template>
    <template #dialog>
      <ParsList :stockId="fromdata.id" :storageSiteId="storageSiteId" />
    </template>
  </base-layout>
</template>
<script>
import baseMixin from "@/mixins/base";
import {
  getDetail,
  storageSitePage,
} from "@/api/after-sale/storehouseManage/inStockManage";
import ParsList from "./component/parsList";
export default {
  components: {
    ParsList,
  },
  mixins: [
    baseMixin({
      idName: "id",
      findData: storageSitePage,
      dataName: ["content", "totalRecords"],
      format(res) {
        return res.map((data) => {
          data.canNum = data.num - data.alreadyNum;
          return data;
        });
      },
    }),
  ],
  data() {
    return {
      fromdata: {},
      from: { stockId: "" },
      storageSiteId: null,
      tableColumnAttributes: [
        { name: "配件仓库", value: "storageSiteName", type: "text" },
        { name: "仓位编号", value: "storageSiteCode", type: "text" },
        { name: "库存数量", value: "num", type: "text" },
        { name: "现有库存", value: "alreadyNum", type: "text" },
        // { name: "内置计数", value: "internalNum", type: "text" },
        { name: "可增加库存", value: "canNum", type: "text" },
        { name: "采购成本", value: "avgPurchasePrice", type: "text" },
        { name: "销售价", value: "avgStoragePrice", type: "text" },
        { name: "总金额", value: "amount", type: "text" },
      ],
    };
  },
  methods: {
    // 详情
    async detail(id) {
      let { data } = await getDetail(id);
      this.fromdata = data;
    },
    // 查看
    view(row) {
      this.storageSiteId = row.storageSiteId;
      this.handleDataInsert("仓位配件列表详情");
    },
  },
  created() {
    let id = this.$route.query.id;
    if (id) this.from.stockId = id;
    this.searchOptions = this.from;
  },
  mounted() {
    let id = this.$route.query.id;
    if (id) {
      this.detail(id);
    }
  },
};
</script>
<style lang="scss" scoped></style>
